<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-11-17 10:06:09
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/资源订阅 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>资源订阅</h3>
      </div>
      <div class="header">
        <div class="taps">
          <div
            class="kdingyue"
            :class="{ choseTap: tapRadio == 2 }"
            @click="choseKdy"
          >
            <h3>全部可订阅({{ wdyNum }})</h3>
            <span></span>
          </div>
          <div class="tips">|</div>
          <div
            class="ydingyue"
            :class="{ choseTap: tapRadio == 1 }"
            @click="choseYdy"
          >
            <h3>已订阅({{ ydyNum }})</h3>
            <span></span>
          </div>
        </div>
        <div class="search">
          <input
            type="text"
            placeholder="请输入关键词搜索"
            v-model="keyword"
            @keyup.enter="handlekejianList"
          />
          <i class="el-icon-search"></i>
        </div>
      </div>
      <div class="yugao" v-show="tapRadio == 2">
        <span class="monthNum">{{ ygMonth }}月</span>
        <div class="left">
          <p v-html="ygText"></p>
        </div>
        <div class="right">
          <div class="ygkjList" v-for="(item,index) in ygkj" :key="index">
            <div class="title" @click="goSubDeta(item.id)">
              <span class="ygtips"></span>
              <p>{{ item.title }}</p>
            </div>
            <div class="ygdy">
              <div
                class="ygwdy"
                v-show="item.dy_status == 0"
                @click="getDy(item.id, item.title)"
              >
                <img src="../../../assets/img/ygdy.png" />
              </div>
              <div
                class="ygydy"
                v-show="item.dy_status == 1"
                @click="celDy(item.id)"
              >
                <img src="../../../assets/img/ygydy.png" />
              </div>
            </div>
          </div>
          <div class="qiege">
            <img src="../../../assets/img/ygmohu.png" alt="" />
          </div>
        </div>
      </div>
      <div id="box" v-for="item in kejianList" :key="item.id">
        <img :src="item.file_url" @click="goSubDeta(item.id)" />
        <div class="msg" @click="goSubDeta(item.id)">
          <div class="boxTop">
            <div class="title">
              {{ item.title }}
            </div>
            <span class="tuisong" @click="goSubDeta(item.id)"
              >查看往期推送</span
            >
          </div>
          <p>{{ item.sub_info }}</p>
          <div class="bottom">
            <!-- timeStamp2String(update_time*1000,2)  -->
            <span class="upTime"
              >资源已更新<a>{{ item.yts_nums }}</a
              >份</span
            >
            <el-progress
              :percentage="item.per"
              :stroke-width="8"
              color="#08A579"
            ></el-progress>
          </div>
        </div>
        <div
          class="getDy"
          @click="getDy(item.id, item.title)"
          v-if="tapRadio == 2 && getDyList.indexOf(item.id) <= -1"
        >
          添加订阅
        </div>
        <div
          class="getDy"
          v-if="tapRadio == 2 && getDyList.indexOf(item.id) > -1"
          style="background: #c4c7cc"
        >
          已订阅
        </div>
        <div
          class="getDy"
          @click="celDy(item.id)"
          v-if="tapRadio == 1 && cancelList.indexOf(item.id) <= -1"
        >
          取消订阅
        </div>
        <div
          class="getDy"
          v-if="tapRadio == 1 && cancelList.indexOf(item.id) > -1"
          style="background: #c4c7cc"
        >
          已取消订阅
        </div>
      </div>
      <div
        class="nothing"
        v-if="nothingShow"
        style="textalign: center; margintop: 30px"
      >
        <img
          src="../../../assets/img/nothing.png"
          alt=""
          style="width: 300px"
        />
      </div>
      <!-- 订阅关注 -->
      <!-- <el-dialog
        :visible.sync="dialogVisible1"
        width="440px"
        :before-close="handleClose1"
        custom-class="guanzhu"
      >
        <div class="dysuccess">
          <img src="../../../assets/img/dysuccess.png" alt="">
        </div>
        <p>您已成功订阅！</p>
        <p>{{ showTitle }}</p>
        <h2>请您关注<a >【语文教研小助手】</a>获取 最新消息通知</h2>
        <img :src="gzhFile" alt="" />
        <span>请关注上方【语文教研小助手】公众号</span>
        <span>定期获取资源推送服务</span>
      </el-dialog> -->
      <el-dialog
        :visible.sync="dialogVisible1"
        width="400px"
        :before-close="handleClose1"
        custom-class="guanzhu"
      >
        <div class="dysuccess">
          <img src="../../../assets/img/dysuccess.png" alt="" />
        </div>
        <p>您已成功订阅！</p>
        <p>{{ showTitle }}</p>
        <h2>请您关注<a>【{{kemu_id == 1?'语文':'英语'}}教研小助手】</a>获取 最新消息通知</h2>
        <div class="gzevm">
          <img :src="gzhFile" alt="" />
        </div>
        <span>如已关注，无需重复关注~</span>
      </el-dialog>
      <!-- 分页部分 -->
      <div class="page1" v-if="kejianList.length > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          background
          :page-sizes="[4, 10, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userinfo,
  nowkemu,
  kemulists,
  list_kejiandingyue,
  dyts,
  nums_kejiandingyue,
  banner,
  list_bannertext,
} from "../../../api/http";
import { timeStamp2String } from "../../../utils/time";
export default {
  name: "changeClass",
  components: {},
  inject: ["reload"],
  data() {
    return {
      timeStamp2String,
      nianji_id: "", //当前年级id
      kejianversions_id: "", //当前版本id
      kemu_id: "", //当前科目id
      tapRadio: 2, //tap切换值,默认为1
      kejianList: [], //订阅课件列表
      wdyNum: 0, //未订阅数量
      ydyNum: 0, //已订阅数量
      getDyList: [], //在可订阅页面点击订阅的课件
      cancelList: [], //在已订阅页面点击取消订阅的课件
      showTitle: "", //点击订阅后弹窗的标题
      gzhFile: "", //公众号二维码
      dialogVisible1: false,
      flag: false,
      keyword: "", //搜索框内容
      page: 1,
      page_size: "4",
      currentPage: 1,
      counts: 0, //总数据数
      nothingShow: false, //空图展示
      ygMonth: "", //预告月份
      ygText: "", //预告内容
      ygkj: [], //预告课件
      regWord: "/", //富文本解析替换词
    };
  },
  created() {
    //获取用户信息
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res);
      this.nianji_id = res.retRes.nianji_id;
      //获取当前科目和版本
      nowkemu({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "当前的科目及版本");
          const data = res.retRes;
          this.kemu_id = data.kemu_id;
          this.kejianversions_id = data.kejianversions_id;
          //资源订阅预告文字
          list_bannertext({
            md5key: localStorage.getItem("md5key"),
            kemu_id: this.kemu_id,
            nianji_ids: this.nianji_id,
            kejianversions_ids: this.kejianversions_id,
          }).then((res) => {
            console.log(res, "预告文字");
            this.ygMonth = res.retRes[0].title;
            this.ygkj = res.retRes[0].templists;
            // this.ygText = res.retRes[0].sub_info
            const reg = new RegExp(this.regWord, "g");
            this.ygText = res.retRes[0].sub_info.replace(reg, "</br>");
            console.log(this.ygText);
          });

          //获取用户订阅信息列表
          list_kejiandingyue({
            md5key: localStorage.getItem("md5key"),
            dyzt: 1,
            kemu_id: this.kemu_id,
            nianji_ids: this.nianji_id,
            kejianversions_ids: this.kejianversions_id,
            title: this.keyword ? this.keyword.trim() : "",
            page: this.page,
            page_size: this.page_size,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "订阅列表");
              // this.kejianList = res.retRes;
              // this.wdyNum = res.retRes.length;
              this.counts = res.retCounts;
              this.ydyNum = res.retCounts;
              if (res.retCounts == 0) {
                this.nothingShow = true;
              } else {
                this.nothingShow = false;
              }
            }
          });
          list_kejiandingyue({
            md5key: localStorage.getItem("md5key"),
            dyzt: 2,
            kemu_id: this.kemu_id,
            nianji_ids: this.nianji_id,
            kejianversions_ids: this.kejianversions_id,
            title: this.keyword ? this.keyword.trim() : "",
            page: this.page,
            page_size: this.page_size,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "订阅列表");
              this.kejianList = res.retRes;
              this.counts = res.retCounts;
              this.wdyNum = res.retCounts;
              if (res.retCounts == 0) {
                this.nothingShow = true;
              } else {
                this.nothingShow = false;
              }
            }
          });
          //获取课件订阅数量
          // nums_kejiandingyue({
          //   md5key: localStorage.getItem("md5key"),
          //   kemu_id: this.kemu_id,
          //   nianji_ids: this.nianji_id,
          //   kejianversions_ids: this.kejianversions_id,
          // }).then((res) => {
          //   console.log(res, "课件订阅数量");
          //   this.wdyNum = res.retRes.wdy;
          //   this.ydyNum = res.retRes.ydy;
          // });
          //获取科目列表中的公众号二维码
          kemulists({
            md5key: localStorage.getItem("md5key"),
          }).then((res) => {
            console.log(res, "科目列表");
            if (this.kemu_id == 1) {
              this.gzhFile = res.retRes[0].gzh_file_url;
            } else if (this.kemu_id == 3) {
              this.gzhFile = res.retRes[1].gzh_file_url;
            }
          });
        }
      });
    });
  },
  methods: {
    getdingyuelist2() {
      list_kejiandingyue({
        md5key: localStorage.getItem("md5key"),
        dyzt: 2,
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianversions_ids: this.kejianversions_id,
        title: this.keyword ? this.keyword.trim() : "",
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "订阅列表");
          this.kejianList = res.retRes;
          this.counts = res.retCounts;
          this.wdyNum = res.retCounts;
          if (res.retCounts == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    getdingyuelist1() {
      list_kejiandingyue({
        md5key: localStorage.getItem("md5key"),
        dyzt: 1,
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianversions_ids: this.kejianversions_id,
        title: this.keyword ? this.keyword.trim() : "",
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "订阅列表");
          this.kejianList = res.retRes;
          // this.wdyNum = res.retRes.length;
          this.counts = res.retCounts;
          this.ydyNum = res.retCounts;
          if (res.retCounts == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    //切换全部可订阅
    choseKdy() {
      this.tapRadio = 2;
      this.getDyList = [];
      this.cancelList = [];
      console.log(this.tapRadio);
      //获取用户订阅信息列表
      this.getdingyuelist2();
      //获取课件订阅数量
      // nums_kejiandingyue({
      //   md5key: localStorage.getItem("md5key"),
      //   kemu_id: this.kemu_id,
      //   nianji_ids: this.nianji_id,
      //   kejianversions_ids: this.kejianversions_id,
      // }).then((res) => {
      //   console.log(res, "课件订阅数量");
      //   this.wdyNum = res.retRes.wdy;
      //   this.ydyNum = res.retRes.ydy;
      // });
    },
    //切换已订阅
    choseYdy() {
      this.tapRadio = 1;
      this.getDyList = [];
      this.cancelList = [];
      console.log(this.tapRadio);
      //获取课件订阅数量
      // nums_kejiandingyue({
      //   md5key: localStorage.getItem("md5key"),
      //   kemu_id: this.kemu_id,
      //   nianji_ids: this.nianji_id,
      //   kejianversions_ids: this.kejianversions_id,
      // }).then((res) => {
      //   console.log(res, "课件订阅数量");
      //   this.wdyNum = res.retRes.wdy;
      //   this.ydyNum = res.retRes.ydy;
      // });
      //获取用户订阅信息列表
      this.getdingyuelist1();
    },
    //前往订阅详情
    goSubDeta(id) {
      this.$router.push({
        name: "SubscriptionDetails",
        query: {
          id: id,
        },
      });
    },
    //添加订阅
    getDy(id, title) {
      console.log(id, title);

      dyts({
        md5key: localStorage.getItem("md5key"),
        kejiandingyue_id: id,
        status: 1,
      }).then((res) => {
        console.log(res, "订阅");
        this.getDyList.push(id);
        this.showTitle = title;
        this.dialogVisible1 = true;
        // this.getdingyuelist1();
        // this.getdingyuelist2();
        list_kejiandingyue({
          md5key: localStorage.getItem("md5key"),
          dyzt: 2,
          kemu_id: this.kemu_id,
          nianji_ids: this.nianji_id,
          kejianversions_ids: this.kejianversions_id,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "订阅列表");
            this.kejianList = res.retRes;
            this.counts = res.retCounts;
            this.wdyNum = res.retCounts;
          }
        });
        list_kejiandingyue({
          md5key: localStorage.getItem("md5key"),
          dyzt: 1,
          kemu_id: this.kemu_id,
          nianji_ids: this.nianji_id,
          kejianversions_ids: this.kejianversions_id,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "订阅列表");
            // this.kejianList = res.retRes;
            this.counts = res.retCounts;
            this.ydyNum = res.retCounts;
          }
        }); 
        //获取课件订阅数量
        // nums_kejiandingyue({
        //   md5key: localStorage.getItem("md5key"),
        //   kemu_id: this.kemu_id,
        //   nianji_ids: this.nianji_id,
        //   kejianversions_ids: this.kejianversions_id,
        // }).then((res) => {
        //   console.log(res, "课件订阅数量");
        //   this.wdyNum = res.retRes.wdy;
        //   this.ydyNum = res.retRes.ydy;
        // });
        this.getYg();
      });
    },
    //取消订阅
    celDy(id) {
      //提示弹窗
      this.$confirm("是否确认取消订阅?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          dyts({
            md5key: localStorage.getItem("md5key"),
            kejiandingyue_id: id,
            status: 2,
          }).then((res) => {
            console.log(res, "取消订阅");
            this.cancelList.push(id);
            this.getDyList.splice(this.getDyList.indexOf(id), 1);
            //获取课件订阅数量
            // nums_kejiandingyue({
            //   md5key: localStorage.getItem("md5key"),
            //   kemu_id: this.kemu_id,
            //   nianji_ids: this.nianji_id,
            //   kejianversions_ids: this.kejianversions_id,
            // }).then((res) => {
            //   console.log(res, "课件订阅数量");
            //   this.wdyNum = res.retRes.wdy;
            //   this.ydyNum = res.retRes.ydy;
            // });
            // this.getdingyuelist1();
            // this.getdingyuelist2();
            list_kejiandingyue({
          md5key: localStorage.getItem("md5key"),
          dyzt: 2,
          kemu_id: this.kemu_id,
          nianji_ids: this.nianji_id,
          kejianversions_ids: this.kejianversions_id,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "订阅列表");
            // this.kejianList = res.retRes;
            this.counts = res.retCounts;
            this.wdyNum = res.retCounts;
          }
        });
        list_kejiandingyue({
          md5key: localStorage.getItem("md5key"),
          dyzt: 1,
          kemu_id: this.kemu_id,
          nianji_ids: this.nianji_id,
          kejianversions_ids: this.kejianversions_id,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "订阅列表");
            this.kejianList = res.retRes;
            this.counts = res.retCounts;
            this.ydyNum = res.retCounts;
          }
        }); 
            this.getYg();
          });
        })
        .catch(() => {
          this.$notify({
            message: "已取消操作",
            duration: 2000,
            showClose: false,
          });
        });
    },
    //获取预告
    getYg() {
      //资源订阅预告文字
      list_bannertext({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianversions_ids: this.kejianversions_id,
      }).then((res) => {
        console.log(res, "预告文字");
        this.ygMonth = res.retRes[0].title;
        this.ygkj = res.retRes[0].templists;
        // this.ygText = res.retRes[0].sub_info
        const reg = new RegExp(this.regWord, "g");
        this.ygText = res.retRes[0].sub_info.replace(reg, "</br>");
        console.log(this.ygText);
      });
    },
    //关闭订阅成功框
    handleClose1(done) {
      this.dialogVisible1 = false;
    },
    //搜索
    handlekejianList() {
      //获取用户订阅信息列表
      list_kejiandingyue({
        md5key: localStorage.getItem("md5key"),
        dyzt: this.tapRadio,
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianversions_ids: this.kejianversions_id,
        title: this.keyword ? this.keyword.trim() : "",
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "订阅列表");
          this.kejianList = res.retRes;
          this.counts = res.retCounts;
          if (res.retCounts == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(val);
      this.page_size = val;
      //获取用户订阅信息列表
      list_kejiandingyue({
        md5key: localStorage.getItem("md5key"),
        dyzt: this.tapRadio,
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianversions_ids: this.kejianversions_id,
        title: this.keyword ? this.keyword.trim() : "",
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "订阅列表");
          this.kejianList = res.retRes;
          this.counts = res.retCounts;
          if (res.retCounts == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      //获取用户订阅信息列表
      list_kejiandingyue({
        md5key: localStorage.getItem("md5key"),
        dyzt: this.tapRadio,
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianversions_ids: this.kejianversions_id,
        title: this.keyword ? this.keyword.trim() : "",
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "订阅列表");
          this.kejianList = res.retRes;
          this.counts = res.retCounts;
          if (res.retCounts == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
  },
};
</script>
<style>
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 800px;
  margin: 0 auto;
}
.el-pagination {
  text-align: center;
  margin: 20px 80px 20px 0;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-dialog__headerbtn {
  /* color: #08a579; */
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
}
.el-button--primary {
  background: #08a579;
  border-color: #08a579;
}
</style>
<style lang="less" scoped>
#container {
  .content {
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .header {
      position: relative;
      display: flex;
      justify-content: space-between;
      height: 30px;
      margin-left: 30px;
      border-bottom: 1px solid #e6e6e6;
      .taps {
        display: flex;
        align-items: center;
        h3 {
          font-size: 14px;
          color: #939599;
        }
        span {
          display: inline-block;
          width: 32px;
          height: 3px;
        }
        .kdingyue {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          margin-left: 20px;
          padding-right: 30px;
          height: 100%;
          cursor: pointer;
        }
        .tips {
          position: relative;
          top: -8px;
        }
        .ydingyue {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          margin-left: 30px;
          height: 100%;
          cursor: pointer;
        }
        .choseTap {
          h3 {
            font-size: 16px;
            color: #333333;
          }
          span {
            background: #08a579;
          }
        }
      }
      .search {
        position: relative;
        position: absolute;
        top: -5px;
        right: 30px;
        input {
          padding-left: 30px;
          width: 170px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #c4c7cc;
          border-radius: 16px;
          outline: none;
        }
        i {
          position: absolute;
          top: 7px;
          left: 10px;
          font-size: 18px;
          color: #c4c7cc;
        }
      }
    }
    .yugao {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin: 30px;
      background-image: url("../../../assets/img/dyygbc.png");
      background-size: 100%;
      background-repeat: no-repeat;
      width: 840px;
      height: 240px;
      .monthNum {
        display: inline-block;
        text-align: center;
        position: absolute;
        top: 1px;
        left: 20px;
        width: 34px;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
      }
      .qiege {
        position: absolute;
        bottom: 0;
        img {
          vertical-align: bottom;
        }
      }
      .left {
        margin-top: 40px;
        margin-left: 15px;
        // white-space: pre-line;
        overflow: hidden;
        -ms-overflow-style: none; /* IE 10+ */
        scrollbar-width: none; /* Firefox */
        overflow-y: scroll;
        p {
          font-size: 14px;
          line-height: 28px;
          width: 375px;
          overflow: hidden;
          line-height: 28px;
          // text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 2;
          // -webkit-box-orient: vertical;
        }
      }
      .right {
        margin-top: 20px;
        margin-right: 30px;
        height: 210px;
        -ms-overflow-style: none; /* IE 10+ */
        scrollbar-width: none; /* Firefox */
        overflow-y: scroll;

        .ygkjList {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          width: 360px;
          background: #ffffff;
          font-size: 14px;
          color: #333;

          .title {
            display: flex;
            align-items: center;
            cursor: pointer;
            .ygtips {
              display: inline-block;
              margin-right: 14px;
              width: 6px;
              height: 48px;
              background: #46a78c;
            }
            p {
              font-size: 15px;
              width: 220px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          img {
            margin-right: 20px;
            width: 80px;
            height: 28px;
            vertical-align: middle;
            cursor: pointer;
          }
        }
        .ygkjList:first-child {
        }
      }
      ::-webkit-scrollbar {
        width: 0px;
      }
      // ::-webkit-scrollbar-track {
      //   background-color: #f5f5f5;
      //   -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
      //   border-radius: 5px;
      // }
      // ::-webkit-scrollbar-thumb {
      //   background-color: rgba(0, 0, 0, 0.1);
      //   background: #d4d4d4;
      //   border-radius: 5px;
      // }
      // ::-webkit-scrollbar-button {
      //   background-color: #eee;
      //   display: none;
      // }
      // ::-webkit-scrollbar-corner {
      //   background-color: black;
      // }
    }
    .nothing {
      margin-top: 100px;
      text-align: center;
    }
    #box {
      display: flex;
      justify-content: space-between;
      // align-items: center;
      margin: 30px;
      margin-right: 0;
      padding-bottom: 30px;
      border-bottom: 1px dashed #ccc;
      cursor: pointer;
      img {
        width: 100px;
        height: 80px;
        border-radius: 8px;
      }
      .msg {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        padding-right: 50px;
        border-right: 1px solid #e6e6e6;
        .boxTop {
          display: flex;
          // justify-content: space-between;
          .title {
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 900;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .tuisong {
            display: inline-block;
            margin-left: 10px;
            width: 96px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border: 1px solid #08a579;
            border-radius: 10px;
            font-size: 12px;
            color: #08a579;
            cursor: pointer;
          }
        }
        p {
          font-size: 14px;
          color: #666;
          overflow: hidden; //超出隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
          // 控制行数
          -webkit-line-clamp: 2; //超出两行隐藏
          -webkit-box-orient: vertical; // 从上到下垂直排列子元素
        }
        .bottom {
          color: #999;
          .upTime {
            display: inline-block;
            margin: 20px 0;
            font-size: 12px;
            a {
              color: #f6444e;
            }
          }
          /deep/.el-progress-bar__outer {
            width: 470px !important;
          }
          /deep/.el-progress__text {
            font-size: 12px !important;
            margin-left: 10px;
          }
        }
      }
      .msg:hover {
        .title {
          color: #08a579;
        }
      }
      .getDy {
        align-self: center;
        margin: 0px 40px 0 40px;
        width: 96px;
        height: 28px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 28px;
        background: #08a579;
        border-radius: 14px;
        background: #08a579;
        border-radius: 14px;
        cursor: pointer;
      }
    }
    /deep/.el-dialog {
      border-radius: 20px;
      overflow: hidden;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      margin-right: 10px;
      color: #c0c1c5;
      font-size: 18px;
      font-weight: 600;
    }
    /deep/.el-dialog__headerbtn {
      right: 36px;
    }
    .guanzhu {
      background: linear-gradient(180deg, #ffffff, #d2f9ee);
      .dysuccess {
        text-align: center;
        width: 400px;

        background: linear-gradient(0deg, #ffffff, #d2f9ee);
        img {
          margin-top: 30px;
          width: 48px;
          height: 48px;
        }
      }
      h2 {
        margin: 0 auto;
        margin-top: 10px;
        width: 270px;
        text-align: center;
        font-size: 18px;
        color: #333333;
        line-height: 30px;
        a {
          color: #f6444e;
        }
      }
      p {
        // margin-bottom: 30px;
        margin: 0 auto;
        width: 400px;
        text-align: center;
        font-size: 16px;
        color: #333;
        line-height: 28px;
      }
      .gzevm {
        margin-top: 5px;
        width: 400px;
        text-align: center;
        img {
          width: 200px;
          height: 200px;
        }
      }
      span {
        display: block;
        line-height: 25px;
        text-align: center;
        color: #999999;
      }
    }

    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog__body {
      padding: 0;
      padding-bottom: 40px;
    }
    .page1 {
      width: 800px;
      margin: 0 auto;
    }
    .el-pagination {
      text-align: center;
      margin: 20px 80px 20px 0;
    }
  }
}
</style>